<template>
  <view class="page-container" :style="containerStyle">
    <!-- 自定义导航栏 -->
    <CustomNavBar 
      v-if="showNavBar"
      :show-back="showBack"
      :title="title"
      :title-color="titleColor"
      :back-icon="backIcon"
      :background-color="navBarBgColor"
      :fixed="navBarFixed"
      @back="handleBack"
    >
      <template #left>
        <slot name="nav-left"></slot>
      </template>
      <template #center>
        <slot name="nav-center"></slot>
      </template>
      <template #right>
        <slot name="nav-right"></slot>
      </template>
    </CustomNavBar>
    
    <!-- 页面内容 -->
    <view class="page-content" :style="contentStyle">
      <slot></slot>
    </view>
    
    <!-- 底部安全区域占位 -->
    <view v-if="showSafeAreaBottom" class="safe-area-bottom" :style="{ height: safeAreaBottom + 'px' }"></view>
  </view>
</template>

<script setup>
import { computed } from 'vue';
import CustomNavBar from './CustomNavBar.vue';
import { getStatusBarHeight, getHeaderHeight, getSafeAreaInsets } from '@/utils/system';

// 定义props
const props = defineProps({
  // 是否显示导航栏
  showNavBar: {
    type: Boolean,
    default: true
  },
  // 是否显示返回按钮
  showBack: {
    type: Boolean,
    default: true
  },
  // 导航栏标题
  title: {
    type: String,
    default: ''
  },
  // 标题颜色
  titleColor: {
    type: String,
    default: '#333'
  },
  // 返回按钮图标
  backIcon: {
    type: String,
    default: '/static/Images/common/Guanbihei.png'
  },
  // 导航栏背景色
  navBarBgColor: {
    type: String,
    default: 'transparent'
  },
  // 导航栏是否固定定位
  navBarFixed: {
    type: Boolean,
    default: false
  },
  // 页面背景色
  backgroundColor: {
    type: String,
    default: '#fff'
  },
  // 是否显示底部安全区域
  showSafeAreaBottom: {
    type: Boolean,
    default: true
  },
  // 内容区域是否填充顶部
  contentPaddingTop: {
    type: Boolean,
    default: false
  }
});

// 定义事件
const emit = defineEmits(['back']);

// 获取系统信息
const statusBarHeight = getStatusBarHeight();
const headerHeight = getHeaderHeight();
const safeAreaInsets = getSafeAreaInsets();
const safeAreaBottom = safeAreaInsets.bottom;

// 容器样式
const containerStyle = computed(() => {
  return {
    backgroundColor: props.backgroundColor,
    minHeight: 'auto'
  };
});

// 内容区域样式
const contentStyle = computed(() => {
  const style = {
    flex: 1
  };
  
  // 如果导航栏固定定位，需要给内容区域添加顶部padding
  if (props.navBarFixed && props.showNavBar) {
    style.paddingTop = (statusBarHeight + headerHeight) + 'px';
  }
  
  // 如果需要内容区域填充顶部
  if (props.contentPaddingTop && props.showNavBar && !props.navBarFixed) {
    style.paddingTop = (statusBarHeight + headerHeight) + 'px';
  }
  
  return style;
});

// 处理返回
const handleBack = () => {
  emit('back');
  if (!emit('back')) {
    uni.navigateBack();
  }
};
</script>

<style lang="scss" scoped>
.page-container {
  display: flex;
  flex-direction: column;
  min-height: auto;
}

.page-content {
  flex: 1;
  position: relative;
}

.safe-area-bottom {
  background-color: inherit;
}
</style>